﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>萤火商城-商业版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/common/i/favicon.ico"/>
    <meta name="apple-mobile-web-app-title" content="萤火商城-商业版"/>
    <link rel="stylesheet" href="Css/amazeui.min.css"/>
    <link rel="stylesheet" href="Css/app.css"/>
    <link rel="stylesheet" href="Css/font_783249_3hfdb7m5w0j.css">
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/func.js"></script>
    <script src="Scripts/api.js"></script>
    <script src="Scripts/font_783249_e5yrsf08rap.js"></script>
    <script src="https://cdn.bootcss.com/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>
    <script>
        BASE_URL = 'https://demo.yiovo.com/';
        STORE_URL = 'index.php?s=/store';
    </script>
</head>

<body data-type="">
<div class="am-g tpl-g">
    <!-- 内容区域 start -->
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-cf">出售中的商品</div>
                </div>
                <div class="widget-body am-fr">
                    <!-- 工具栏 -->
                    <div class="page_toolbar am-margin-bottom-xs am-cf">
                        <form  id = "searchForm" class="toolbar-form" action="javascript:;">
                            <input type="hidden" name="s" value="/store/goods/index">
                            <div class="am-u-sm-12 am-u-md-3">
                                <div class="am-form-group">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a class="am-btn am-btn-default am-btn-success"
                                           href="goods_add.html">
                                            <span class="am-icon-plus"></span> 新增
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-9">
                                <div class="am fr">

                                    <div class="am-form-group am-fl">
                                        <select id="parentId" name="goods_category"
                                                data-am-selected="{btnSize: 'sm', placeholder: '商品分类'}">
                                            <option value=""></option>
                                            <optgroup label="">
                                                <option value="0">全部</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                    <div class="am-form-group am-fl">
                                        <select name="goods_status"
                                                data-am-selected="{btnSize: 'sm', placeholder: '商品状态'}">
                                            <option value=""></option>

                                            <option value="0">全部</option>
                                            <option value="10"
                                            >上架
                                            </option>
                                            <option value="20"
                                            >下架
                                            </option>
                                        </select>
                                    </div>
                                    <div class="am-form-group am-fl">
                                        <div class="am-input-group am-input-group-sm tpl-form-border-form">
                                            <input type="text" class="am-form-field" name="goods_name"
                                                   placeholder="请输入商品名称"
                                                   value="">
                                            <div class="am-input-group-btn">
                                                <button onclick="search()" class="am-btn am-btn-default am-icon-search"
                                                        type="submit"></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="am-scrollable-horizontal am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black am-text-nowrap">
                            <thead>
                            <tr>
                                <th>商品ID</th>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>商品分类</th>
                                <th>实际销量</th>
                                <th>商品排序</th>
                                <th>商品状态</th>
                                <th>添加时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="goodslist">
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr"></div>
                        <div class="am-fr pagination-total am-margin-right">
                            <div class="am-vertical-align-middle">总记录：11</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        var tpl_td = '<td class="am-text-middle">{0}</td>'
        var tpl_status = '<span class="j-state am-badge x-cur-p am-badge-success"  data-id="{0}" data-state="{1}">{2}</span>';
        var tpl_btn_edit = ' <a href="goods_add.html?id={0}"><i class="am-icon-pencil"></i> 编辑</a>';
        var tpl_btn_del = ' <a href="javascript:;" class="item-delete tpl-table-black-operation-del" data-id="{0}"> <i class="am-icon-trash"></i> 删除 </a>';
        var tpl_btn_group = ' <div class="tpl-table-black-operation">{0}</div>';
        var tpl_img = '<a href="{0}"\n' +
            '                                       title="点击查看大图" target="_blank">\n' +
            '                                        <img src="{0}"\n' +
            '                                             width="50" height="50" alt="商品图片">\n' +
            '                                    </a>';

        var data = {}
        var refreshTable = function (goods) {
            console.log(goods);
            var tr = ""
            $("#goodslist").empty();
            for (var i = 0; i < goods.total; i++) {
                tr += "<tr>";
                tr += StringFormat(tpl_td, goods.rows[i].id);
                tr += StringFormat(tpl_td, StringFormat(tpl_img, goods.rows[i].image));
                tr += StringFormat(tpl_td, goods.rows[i].goods_name);
                tr += StringFormat(tpl_td, goods.rows[i].category_name);
                tr += StringFormat(tpl_td, goods.rows[i].goods_sales);
                tr += StringFormat(tpl_td, goods.rows[i].goods_sort);
                var status = goods.rows[i].goods_status == 10 ? "上架" : "下架";
                var res_status = StringFormat(tpl_status, goods.rows[i].id, goods.rows[i].goods_status, status);
                tr += StringFormat(tpl_td, res_status);
                tr += StringFormat(tpl_td, $.format.date(goods.rows[i].create_time, "yyyy-MM-dd HH:mm:ss"));
                var edit = StringFormat(tpl_btn_edit, goods.rows[i].id);
                var del = StringFormat(tpl_btn_del, goods.rows[i].id);
                tr += StringFormat(tpl_td, StringFormat(tpl_btn_group, del + edit));
                tr += "</tr>";
            }
            $("#goodslist").append(tr);
        }
        function search() {
            var data =$("#searchForm").serialize();
            getGoods(data,refreshTable)
        }

        $(function () {

            var refreshCategory = function (parents) {
                var str = "";
                for (var i = 0; i < parents.length; i++) {
                    str += ('<optgroup label="'+ parents[i].name+'">');
                    if (parents[i].nodes)
                        for (var j = 0; j < parents[i].nodes.length; j++)
                            str += ('<option value="' + parents[i].nodes[j].id + '">&nbsp;&nbsp;|-' + parents[i].nodes[j].name + '</option>');
                    str+="</optgroup>"
                }
                console.log(str)
                $("#parentId").append(str);
            }
            getGoods(data, refreshTable);
            getLevel(refreshCategory)
            // 商品状态
            $('.j-state').click(function () {
                var data = $(this).data();
                layer.confirm('确定要' + (parseInt(data.state) === 10 ? '下架' : '上架') + '该商品吗？'
                    , {title: '友情提示'}
                    , function (index) {
                        if (data.state === 10)
                            downStatus(data.id);
                        else if (data.state === 20)
                            upStatus(data.id);
                        layer.close(index);
                        window.location.reload()
                    });

            });
            // 删除元素
            $('.item-delete').click(function () {
                var data = $(this).data();
                layer.confirm('确定要删除该商品吗？'
                    , {title: '友情提示'}
                    , function (index) {
                        delGoods(data.id);
                        layer.close(index);
                        window.location.reload()
                    });

            });


        });
    </script>


</div>
<!-- 内容区域 end -->

</div>
<script src="Scripts/layer.js"></script>
<script src="Scripts/jquery.form.min.js"></script>
<script src="Scripts/amazeui.min.js"></script>
<script src="Scripts/webuploader.html5only.js"></script>
<script src="Scripts/art-template.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/file.library.js"></script>
</body>

</html>
